<template>
  <module :code-str="codeStr" :code-desc="codeDesc">
    <template #moduleName></template>
    <template #moduleDesc></template>
    <template #moduleComponent>
      <h-input
        ref="number"
        placeholder="number"
        v-model="number"
        rule="number"
      ></h-input>
      <h-input
        ref="postcode"
        placeholder="postcode"
        v-model="postcode"
        rule="postcode"
      ></h-input>
      <h-input
        ref="phone"
        placeholder="phone"
        v-model="phone"
        rule="phone"
      ></h-input>
      <ul>
        <li>number: {{ number }}</li>
        <li>postcode: {{ postcode }}</li>
        <li>phone: {{ phone }}</li>
      </ul>
    </template>
  </module>
</template>

<script>
export default {
  alias: "V1InputBasicDemo",
  data() {
    return {
      number: "",
      phone: "",
      postcode: "",
      codeStr: `
<h-input ref="number" placeholder="number" v-model="number" rule="number"></h-input>
<h-input ref="postcode" placeholder="postcode" v-model="postcode" rule="postcode"></h-input>
<h-input ref="phone" placeholder="phone" v-model="phone" rule="phone"></h-input>
      `,
      codeDesc: "",
    };
  },
};
</script>

<style>
</style>